<template>
  <div class="w-full max-w-[600px] p-10 bg-white rounded-lg shadow-xl">
    <h2 class="text-center mb-8 text-2xl text-gray-800">用户登录</h2>
    <form @submit.prevent="handleLogin" class="space-y-6">
      <!-- 用户名 -->
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-600">用户名</label>
        <input
            v-model="username"
            type="text"
            required
            placeholder="请输入用户名"
            class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
        />
      </div>

      <!-- 密码 -->
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-600">密码</label>
        <input
            v-model="password"
            type="password"
            required
            placeholder="请输入密码"
            class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
        />
      </div>

      <!-- 错误提示 -->
      <div v-if="errorMessage" class="text-red-500 text-sm">
        {{ errorMessage }}
      </div>

      <!-- 登录按钮 -->
      <button
          type="submit"
          class="w-full py-2 bg-[#00b4dfff] hover:bg-emerald-600"
      >
        登录
      </button>

      <!-- 底部链接 -->
      <div class="mt-4 text-center text-gray-600">
        <router-link to="/register" class="text-emerald-500">立即注册</router-link>
        <span class="mx-2">|</span>
        <router-link to="/reset-password" class="text-emerald-500">忘记密码？</router-link>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    }
  },
  methods: {
    handleLogin() {
      const users = JSON.parse(localStorage.getItem('users')) || []
      const user = users.find(u => u.username === this.username)

      if (!user) {
        this.errorMessage = '用户不存在'
      } else if (user.password !== this.password) {
        this.errorMessage = '密码错误'
      } else {
        localStorage.setItem('authToken', 'mock-token')
        this.$router.push('/home')
      }
    }
  }
}
</script>